<template>
  <auto-scale-container
      :base-width="1920"
      :base-height="1080"
      mode="fill"
      :transition="false"
      style="background: #000"
      id="fullscreenId"
    >
    <div class="home" :style="animationStyle">
      <visual-header :weather="weatherData"/>
      <div class="module_09">
        <map-google :data="mapData"/>
      </div>
      <el-row class="content-box">
        <el-col :span="6" :class="unfoldFoldShow ? 'module_list_true' : 'module_list'">
          <div class="module_01">
            <visual-card :name="$t('Byname1')">
              <totalNumberOrders :data="orderTotalData"/>
            </visual-card>
          </div>
          <div class="module_02">
            <visual-card :name="$t('Byname2')">
              <latestRealTimeOrders :data="recentData"/>
            </visual-card>
          </div>
          <div class="module_03">
            <visual-card :name="$t('Byname3')">
              <salesRevenueInThePastSevenDays :data="weekSalesData"/>
            </visual-card>
          </div>
        </el-col>
        <el-col :span="12" class="middle-center">
          <div class="module_07_top">
            <indexListPanel :span="3" :data="dataPanelData"/>
          </div>
          <div class="module_07" :class="unfoldFoldShow ? 'module_bottom_true' : 'module_bottom'">
            <visual-card :name="$t('Byname4')">
              <thisMonthsSalesRankingStores :data="shopSaleAmountData"/>
            </visual-card>
          </div>
          <div class="module_07_bottom" :class="unfoldFoldShow ? 'module_bottom_true' : 'module_bottom'">
             <visualFullscreen @unfoldFold="unfoldFold"/>
          </div>
        </el-col>
        <el-col :span="6" :class="unfoldFoldShow ? 'module_right_true' : 'module_right'">
          <div class="module_04">
            <visual-card :name="$t('Byname5')">
              <vehicleModelOrder :type="carTypeList" :data="orderData"/>
            </visual-card>
          </div>
          <div class="module_05">
            <visual-card :name="$t('Byname6')" >
              <theBestSellingVehicleOfThisMonth :data="hotSaleCarsData"/>
            </visual-card>
          </div>
          <div class="module_06">
            <visual-card :name="$t('Byname7')">
              <numberOfOrdersInThePastSevenDays :data="weekSalesTotalData"/>
            </visual-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </auto-scale-container>
  
</template>

<script>
import { getHomeIndex, lastestsevensales, getareatotals, getWeather, getMapData, getCity} from '@/api/mapApi.js'
import AutoScaleContainer from '@/components/AutoScaleContainer'
import VisualHeader from './vue/visual-header'
import VisualCard from './vue/visual-card'
// 全屏按钮
import visualFullscreen from './vue/visual-fullscreen'
// 指标
import indexListPanel from './vue/index-list-panel'
// 总订单数
import totalNumberOrders from './component/total-number-orders'
// 车型订单分布
import vehicleModelOrder from './component/vehicle-model-order'
// 近七日订单数
import numberOfOrdersInThePastSevenDays from './component/number-of-orders-in-the-past-seven-days'
// 最新实时订单
import latestRealTimeOrders from './component/latest-real-time-orders'
// 本月最热销的车辆
import theBestSellingVehicleOfThisMonth from './component/the-best-selling-vehicle-of-this-month'
// 近7日销售额
import salesRevenueInThePastSevenDays from './component/sales-revenue-in-the-past-seven-days'
// 本月销售排行门店
import thisMonthsSalesRankingStores from './component/this-months-sales-ranking-stores'
// 地图
import mapGoogle from './component/map-google'




export default {
  name: "Index",
  components: { 
    AutoScaleContainer,
    VisualHeader,
    VisualCard,
    visualFullscreen,
    indexListPanel,
    totalNumberOrders,
    vehicleModelOrder,
    numberOfOrdersInThePastSevenDays,
    latestRealTimeOrders,
    theBestSellingVehicleOfThisMonth,
    salesRevenueInThePastSevenDays,
    thisMonthsSalesRankingStores,
    mapGoogle,
  },
  data() {
    return {
      // 版本号
      version: "3.8.9",
      unfoldFoldShow: true,
      duration: '0s', // 可以动态修改这个值
      dataPanelData: [], // 指标
      orderTotalData: [], // 按城市分类订单数
      weekSalesData: [], // 近7日订单销售额
      weekSalesTotalData: [], // 近7日订单数
      shopSaleAmountData: [], // 本月销售排行门店
      recentData: [], // 最新实时订单
      hotSaleCarsData: [], // 本月最热销的车辆
      orderData: [], // 车型订单数量
      carTypeList: [], // 车型总类
      mapData: [], // 地图数据
      monthSales: '', // 月销售额
      pollInterval: null,
      cityId: '', // 城市id
      cityName: undefined, // 城市名称
      options: [], // 城市列表
      weatherData: {
        conditions: '',
        minTemperatura: 0,
        maxTemperatura: 0,
        icon: '',
      }, // 天气信息
    }
  },
  computed: {
    animationStyle() {
      return {
        '--duration': this.duration,
      }
    }
  },
  created() {
    this.$eventBus.$on('change-city', this.init);
    this.$eventBus.$on('change-Language', this.init);
    this.init()
    // 城市字典
    this.getCityData()
    // 十分钟
    this.pollInterval = setInterval(this.init, 1000 * 60 * 10)
    // // 十秒
    // this.pollInterval = setInterval(this.init, 1000 * 10)
  },

  methods: {

    /**
     * 获取城市字典
     */
    getCityData(){
      getCity().then(res => {
        if(res.status == 200){
            this.options = res.data.list
        }else{
            this.options = []
        }
      })
    },

    /**
     * 近7日订单销售额
     */
    getSalesVolume(){
      let params = {
        cityid: this.cityId,
        language: 'jp',
      }
      lastestsevensales(params).then(res => {
        if(res.status == '200'){
          this.weekSalesData = res.data.weekSales
          this.weekSalesTotalData = res.data.weekSalesTotal
        }
      })
    },

    /**
     * 所有地区订单数
     */
    getAreatotals(){
      let params = {
        cityid: this.cityId,
        language: 'jp',
      }
      getareatotals(params).then(res => {
        if(res.status == '200'){
          this.orderTotalData = res.data.orderTotal || []
        }
      })
    },

    /**
     * 获取地图图层数据
     */
    getMapData(){
      let params = {
        language: 'jp',
        pageNumber: 1,
        pageSize: 2000000
      }
      getMapData(params).then(res => {
        if(res.status == '200'){
          this.mapData = res.data.list
        }
      })
    },

    /**
     * 获取天气信息
     */
    getWeather(){
      let params = {
        cityid: this.cityId,
        lang: 'jp',
      }
      getWeather(params).then(res=>{
        if(res.status == '200'){
          this.weatherData = {
            conditions: res.data.conditions,
            minTemperatura: res.data.tempmin,
            maxTemperatura: res.data.tempmax,
            icon: res.data.icon,
          }
        }
      })
    },
    init(e){
      this.cityId = e?e:this.cityId
      this.dataPanelData = [
        { name: this.$t('Byname9_1'), value: '', unit:  this.$t('Byname10') },
        { name: this.$t('Byname9'), name1: `${this.cityName || ''}${this.$t('Byname8')}`, value: '', unit:  this.$t('Byname10') },
        { name: this.$t('Byname9_2'), value: '', unit:  this.$t('Byname10') },
      ] // 指标
      if(this.options.length){
        const targetIds = this.cityId?this.cityId.split(','):'';
        const filteredData = this.options.filter(item => targetIds.includes(item.id));
        const titles = filteredData.map(item => item.title);
        this.cityName = titles.join(',')
        this.dataPanelData[1].name1 = `${this.cityName || ''}${this.$t('Byname8')}`
        console.log('this.cityName', this.cityName)
      }
      // 获取首页数据
      let params = {
        cityid: this.cityId,
      }
      getHomeIndex(params).then(res => {
        if(res.status == '200'){
          this.dataPanelData = [
            { name: this.$t('Byname9_1'), value: Number(res.data.todaySales.amount), unit: this.$t('Byname10') },
            { name: this.$t('Byname9'), name1: `${this.cityName || ''}${this.$t('Byname8')}`, value: Number(res.data.monthSales), unit: this.$t('Byname10') },
            { name: this.$t('Byname9_2'), value: Number(res.data.yesterdaySales.amount), unit: this.$t('Byname10') },
          ]
          this.shopSaleAmountData = res.data.shopSaleAmount
          this.recentData = res.data.recent
          this.hotSaleCarsData = res.data.hotSaleCars
          this.orderData = res.data.orderData
          this.carTypeList = res.data.carTypeList
        }
      })
      this.getSalesVolume()
      this.getAreatotals()
      this.getMapData()
      this.getWeather()
    },
    unfoldFold(e){
      this.unfoldFoldShow = e
      this.duration = '1s';
      console.log('e-->>', e)
    }
  },
  beforeDestroy() {
    clearInterval(this.pollInterval)
    this.$eventBus.$off('change-city', this.init); // 组件销毁前移除监听器，防止内存泄漏
  },
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  color: #fff;
  background-image: url('./assets/image/backgroundImage.png');
  background-color: rgba(9, 53, 107, 1);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .module_09{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .content-box{
    width: 100%;
    height: calc(100% - 114px);
    padding: 15px;
    pointer-events: none;
    .module_list {
      animation: slideLeft var(--duration) forwards;
    }
    .module_list_true{
      transform: translateX(0); /* 初始位置 */
      animation: slideLefttrue var(--duration) forwards;
    }
    .module_right {
      animation: slideRight var(--duration) forwards;
    }
    .module_right_true{
      transform: translateX(0); /* 初始位置 */
      animation: slideRighttrue var(--duration) forwards;
    }
    .module_bottom {
      animation: slidebottom var(--duration) forwards;
    }
    .module_bottom_true{
      transform: translateX(0); /* 初始位置 */
      animation: slidebottomtrue var(--duration) forwards;
    }
    .module_01{
      width: 100%;
      height: 300px;
      pointer-events: auto;
    }
    .module_02{
      width: 100%;
      height: 305px;
      margin-top: 15px;
      pointer-events: auto;
    }
    .module_03{
      width: 100%;
      height: 300px;
      margin-top: 15px;
      pointer-events: auto;
    }
    .module_04{
      width: 100%;
      height: 300px;
      pointer-events: auto;
    }
    .module_05{
      width: 100%;
      height: 305px;
      margin-top: 15px;
      pointer-events: auto;
    }
    .module_06{
      width: 100%;
      height: 300px;
      margin-top: 15px;
      pointer-events: auto;
    }
    .middle-center {
      height: 100%;
      display: flex;
      align-items: flex-end;
      pointer-events: none;
      position: relative;
      .module_07_top {
        display: flex;
        justify-content: center;
        width: 100%;
        height: fit-content;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: auto;
      }
      .module_07_bottom {
        width: fit-content;
        height: fit-content;
        position: absolute;
        bottom: 310px;
        right: 10px;
        pointer-events: auto;
      }
      .module_07 {
        height: 300px;
        padding: 0 15px;
        box-sizing: border-box;
        width: 100%;
        pointer-events: auto;
      }
      @keyframes slideLeft {
        from { transform: translateX(0); }
        to { transform: translateX(-500px); }
      }
      @keyframes slideLefttrue {
        from { transform: translateX(-500px); }
        to { transform: translateX(0); }
      }
      
      @keyframes slideRight {
        from { transform: translateX(0); }
        to { transform: translateX(+500px); }
      }
      @keyframes slideRighttrue {
        from { transform: translateX(+500px); }
        to { transform: translateX(0); }
      }
      @keyframes slidebottom {
        from { transform: translateY(0); }
        to { transform: translateY(+320px); }
      }
      @keyframes slidebottomtrue {
        from { transform: translateY(+320px); }
        to { transform: translateY(0); }
      }
      
    }
    .name{
      font-size: 20px;
      font-weight: 500;
    }
    .sales_volume{
      color: #ffa620;
      font-size: 24px;
      font-weight: 500;
    }
  }
}
</style>


